<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VSelect v-model="form.audit_name" style="min-width: 160px" :options="filters || []" clearable filterable
          placeholder="规则名称" />
        <VCascader v-model="form.create_user_id" placeholder="添加人员" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VSelect v-model="form.audit_page" :options="options.audit_page || []" style="min-width: 160px" multiple
          collapse-tags clearable filterable placeholder="审核界面" />
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/settings/audit/add" type="primary" @click="create(tableRef)"><i class="dk-iconfont icon-Plus" />添加</VButton>
        <VExport auth="/purchase/settings/audit/derive" mainKey="arc_id" url="/v1/purchase-config/audit-rule/export"
          name="audit" class="ml-auto" :tableRef="tableRef" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add.vue'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableRef = ref()
const logRef = ref()
const loadings = reactive({})

// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 删除
const remove = (arc_id, rowIndex) => {
  ElMessageBox.confirm('此操作将删除规则, 是否继续？', '提示', {
    confirmButtonClass: 'messagebox-confirm-button',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(() => {
      loadings['remove' + rowIndex] = true
      api.delete({ arc_id }).then(res => {
        query()
        ElMessage({ type: 'success', message: '删除成功!' })
      }).finally(() => {
        loadings['remove' + rowIndex] = false
      })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '取消操作', })
    })
}

// 获取options
const options = ref({})
getOption({ type: 'audit_config' }).then(res => {
  options.value = res.data
})

let filters = ref([])

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 74 },
  showOverflow: false,
  formConfig: {
    data: {
      audit_name: '',
      purchase_account_id: [],
      account_type: [],
      dateRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'seq', title: '编号', fixed: 'left', width: 60 },
    {
      field: 'audit_name', title: '规则名称', minWidth: 160, slots: {
        default: ({ row }) => <VText value={row.audit_name} line={2} />
      }
    },
    {
      field: 'audit_name', title: '所属部门', minWidth: 120, slots: {
        default: ({ row }) => <VText value={row.department_name} line={2} />
      }
    },
    {
      field: 'audit_page_name', title: '审核界面', width: 120, slots: {
        default: ({ row }) => <VText value={row.audit_page_name} />
      }
    },
    {
      field: 'doc_type_name', title: '单据类型', width: 120, slots: {
        default: ({ row }) => <VText value={row.doc_type_name} />
      }
    },
    {
      field: 'audit_type_name', title: '审核类型', width: 100, slots: {
        default: ({ row }) => <VText value={row.audit_type_name} />
      }
    },
    {
      field: 'company_id_name', title: '审核角色', minWidth: 260, slots: {
        default: ({ row, rowIndex }) => {
          const content = (line) => (row.audit_content || []).map(d => {
            return <div class='w-full'>
              <VText title={['一级审核', '二级审核', '三级审核'][+d.audit_level - 1]} value={d.audit_role_name} line={line} />
              {d.audit_judge ? <VText title='判断条件' value={d.audit_judge} line={line} /> : ''}
            </div>
          })
          return <VMore value={content} key={rowIndex} />
        }
      }
    },
    {
      field: 'create_user', title: '添加人', width: 120, slots: {
        default: ({ row }) => <VText value={row.create_user} />
      }
    },
    {
      field: 'update_time', title: '更新时间', width: 170, slots: {
        default: ({ row }) => <VText value={row.update_time} />
      }
    },
    {
      field: 'status_name', title: '状态', width: 80, slots: {
        default: ({ row }) => <VStatus value={row.status_name === '启用'} />
      }
    },
    {
      title: '操作', width: 150, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { arc_id } = row
          return <div class='nm flex gap-2'>
            <VButton auth="/purchase/settings/audit/edit" link type="primary" onClick={() => addRef?.value.open(arc_id)}>编辑</VButton>
            <VButton auth="/purchase/settings/audit/delete" link type="danger" loading={loadings['remove' + rowIndex]} onClick={() => remove(arc_id, rowIndex)}>删除</VButton>
            <VButton auth="/purchase/settings/audit/logs" link type="primary" onClick={() => logRef?.value.open({ log_type: 'audit_config', arc_id })}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }).then(res => {
        filters.value = res.data.map(d => ({ label: d.audit_name, value: d.audit_name }))
        return res
      })
    }
  }
})
</script>
  